import { memo } from 'react';

const GlobalHeader: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
	return (
		<div className="global-header relative h-56 w-full bg-headerBg shadow-[0_0_20px_rgba(231,231,231,.6)]">
			<div className={`px-25 h-full flex items-center box-border mx-auto w-full`}>
				<div className="flex items-center">
					<p className="w-24 h-24 bg-#2969f7 rounded-full m-r-10 flex items-center justify-center text-#fff font-bold text-13">
						域
					</p>
					<h1 className="text-23 font-bold text-#fff">区域国别研究平台</h1>
				</div>
				<div className="flex-1 h-full w-0">{children}</div>
			</div>
		</div>
	);
};

export default memo(GlobalHeader);
